flutter.mdx

title	subtitle	breadcrumb	hideToc
Use Supabase with Flutter	Learn how to create a Supabase project, add some sample data to your database, and query the data from a Flutter app.	Framework Quickstarts	true

<StepHikeCompact.Step step={1}> <StepHikeCompact.Details title="Set up a Supabase project with sample data">

[Create a new project](https://supabase.com/dashboard) in the Supabase Dashboard.

After your project is ready, create a table in your Supabase database using the [SQL Editor](https://supabase.com/dashboard/project/_/sql) in the Dashboard. Use the following SQL statement to create a `countries` table with some sample data.

</StepHikeCompact.Details>

<StepHikeCompact.Code>

 ```sql SQL_EDITOR
  -- Create the table
  CREATE TABLE countries (
  id SERIAL PRIMARY KEY,
  name VARCHAR(255) NOT NULL
  );
  -- Insert some sample data into the table
  INSERT INTO countries (name) VALUES ('United States');
  INSERT INTO countries (name) VALUES ('Canada');
  INSERT INTO countries (name) VALUES ('Mexico');
  ````

</StepHikeCompact.Code>

</StepHikeCompact.Step>

<StepHikeCompact.Step step={2}>

<StepHikeCompact.Details title="Create a Flutter app">

Create a Flutter app using the `flutter create` command. You can skip this step if you already have a working app.

</StepHikeCompact.Details>

<StepHikeCompact.Code>

  ```bash Terminal
  flutter create my_app
  ```

</StepHikeCompact.Code>

</StepHikeCompact.Step>

<StepHikeCompact.Step step={3}>

<StepHikeCompact.Details title="Install the Supabase client library">

  The fastest way to get started is to use the [`supabase_flutter`](https://pub.dev/packages/supabase_flutter) client library which provides a convenient interface for working with Supabase from a Flutter app.

  Open the `pubspec.yaml` file inside your Flutter app and add `supabase_flutter` as a dependency.

</StepHikeCompact.Details>

<StepHikeCompact.Code>

  ```yaml pubspec.yaml
  supabase_flutter: ^2.0.0
  ```

</StepHikeCompact.Code>

</StepHikeCompact.Step>

<StepHikeCompact.Step step={4}>

<StepHikeCompact.Details title="Initialize the Supabase client">

  Open `lib/main.dart` and edit the main function to initialize Supabase using your project URL and public API (anon) key:

  <ProjectConfigVariables variable="url" />
  <ProjectConfigVariables variable="anonKey" />

</StepHikeCompact.Details>

<StepHikeCompact.Code>

  ```dart lib/main.dart
  import 'package:supabase_flutter/supabase_flutter.dart';

  Future<void> main() async {
    WidgetsFlutterBinding.ensureInitialized();

    await Supabase.initialize(
      url: 'YOUR_SUPABASE_URL',
      anonKey: 'YOUR_SUPABASE_ANON_KEY',
    );
    runApp(MyApp());
  }
  ```

</StepHikeCompact.Code>

</StepHikeCompact.Step>

<StepHikeCompact.Step step={5}>

<StepHikeCompact.Details title="Query data from the app">

  Use a `FutureBuilder` to fetch the data when the home page loads and display the query result in a `ListView`.

  Replace the default `MyApp` and `MyHomePage` classes with the following code.

</StepHikeCompact.Details>

<StepHikeCompact.Code>

  ```dart lib/main.dart
  class MyApp extends StatelessWidget {
    const MyApp({super.key});

    @override
    Widget build(BuildContext context) {
      return const MaterialApp(
        title: 'Countries',
        home: HomePage(),
      );
    }
  }

  class HomePage extends StatefulWidget {
    const HomePage({super.key});

    @override
    State<HomePage> createState() => _HomePageState();
  }

  class _HomePageState extends State<HomePage> {
    final _future = Supabase.instance.client
        .from('countries')
        .select();

    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: FutureBuilder(
          future: _future,
          builder: (context, snapshot) {
            if (!snapshot.hasData) {
              return const Center(child: CircularProgressIndicator());
            }
            final countries = snapshot.data!;
            return ListView.builder(
              itemCount: countries.length,
              itemBuilder: ((context, index) {
                final country = countries[index];
                return ListTile(
                  title: Text(country['name']),
                );
              }),
            );
          },
        ),
      );
    }
  }
  ```

</StepHikeCompact.Code>

</StepHikeCompact.Step>

<StepHikeCompact.Step step={6}> <StepHikeCompact.Details title="Start the app">

Run your app on a platform of your choosing! By default an app should launch in your web browser.

Note that `supabase_flutter` is compatible with web, iOS, Android, macOS, and Windows apps.
Running the app on MacOS requires additional configuration to [set the entitlements](https://docs.flutter.dev/development/platform-integration/macos/building#setting-up-entitlements).

</StepHikeCompact.Details>

<StepHikeCompact.Code>

  ```bash Terminal
  flutter run
  ```

</StepHikeCompact.Code>

</StepHikeCompact.Step>

Going to production

Android

In production, your Android app needs explicit permission to use the internet connection on the user's device which is required to communicate with Supabase APIs. To do this, add the following line to the android/app/src/main/AndroidManifest.xml file.

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
  <!-- Required to fetch data from the internet. -->
  <uses-permission android:name="android.permission.INTERNET" />
  <!-- ... -->
</manifest>